<template>
    <el-dialog title="修改知识库内容" :visible.sync="dialogTableVisible" :show-close="true" :center="true" top="4vh" :before-close="beforeClose" :close-on-click-modal="false">
        <div class="dialogVue">
            <div class="innerVue" ref="question">
                <template v-if="detail.type===1">
                    <div class="inpVue">
                        <div class="label">关联问题</div>
                        <div class="flex align_center margin10" v-for="(item, index) in questions" :key="index">
                            <el-input v-model="questions[index]" placeholder="请输入问题" :maxlength="256"></el-input>
                            <span class="el-icon-plus" style="padding-left: 12px; font-size: 16px; color: #AAA; cursor: pointer;" v-if="index===questions.length-1 && questions.length<10" @click="addQuestion"></span>
                            <span class="el-icon-close" style="padding-left: 12px; font-size: 16px; color: #AAA; cursor: pointer;" v-else @click="removeQuestion(index)"></span>
                        </div>
                        
                    </div>
                    <div class="inpVue">
                        <div class="label">答案</div>
                        <textarea placeholder="请输入问题" v-model="detail.answer" :maxlength="500"></textarea>
                    </div>
                </template>
                <template v-if="detail.type===2">
                    <div class="inpVue">
                        <div class="label" v-if="type==='img'">选择图片文件</div>
                        <div class="label" v-if="type==='video'">选择视频文件</div>
                        <div class="label" v-if="type==='pdf'">选择文件</div>
                        <div class="flex">
                            <div class="upload relative text_center" v-if="type==='img'">
                                <span class="el-icon-loading" v-if="isLoading" style="font-size: 20px; line-height: 100px;"></span>
                                <img src="../../../assets/add.png" style="width: 24px; height: 24px;" class="absolute_auto" v-else>
                                <input ref="clearRef" class="fileBtn" type="file" id="fileupload" accept=".png, .jpg, .jpeg" @change="imgfileChange($event)"/>
                            </div>
                            <div class="upload relative text_center" v-if="type==='video'">
                                <span class="el-icon-loading" v-if="isLoading" style="font-size: 20px; line-height: 100px;"></span>
                                <img src="../../../assets/add.png" style="width: 24px; height: 24px;" class="absolute_auto" v-else>
                                <input ref="clearRef" class="fileBtn" type="file" id="fileupload" accept=".mp4" @change="videofileChange($event)"/>
                            </div>
                            <div class="upload relative text_center" v-if="type==='pdf'">
                                <span class="el-icon-loading" v-if="isLoading" style="font-size: 20px; line-height: 100px;"></span>
                                <img src="../../../assets/add.png" style="width: 24px; height: 24px;" class="absolute_auto" v-else>
                                <input ref="clearRef" class="fileBtn" type="file" id="fileupload" accept=".pdf, .xlsx, .docx" @change="pdffileChange($event)"/>
                            </div>
                        </div>
                        <div class="fileList margin10 flex" v-if="detail.url">
                            <div class="file" v-for="(o, i) in detail.url.split(',')" :key="i">
                                <i>{{ o.split('-')[o.split('-').length-1] }}</i>
                                <span class="el-icon-close" @click="removeFun(o)"></span>
                            </div>
                        </div>
                    </div>
                    <div class="inpVue">
                        <div class="label" v-if="type==='img'">图片内容概述</div>
                        <div class="label" v-if="type==='video'">视频内容概述</div>
                        <div class="label" v-if="type==='pdf'">文件内容概述</div>
                        <textarea v-model="detail.answer" :maxlength="500" placeholder="请输入内容概述, 帮助AI学习训练"></textarea>
                    </div>
                    <div class="inpVue">
                        <div class="label">关联问题</div>
                        <div class="flex align_center margin10" v-for="(item, index) in questions" :key="index">
                            <el-input v-model="questions[index]" placeholder="请输入问题" :maxlength="256"></el-input>
                            <span class="el-icon-plus" style="padding-left: 12px; font-size: 16px; color: #AAA; cursor: pointer;" v-if="index===questions.length-1 && questions.length<10" @click="addQuestion"></span>
                            <span class="el-icon-close" style="padding-left: 12px; font-size: 16px; color: #AAA; cursor: pointer;" v-else @click="removeQuestion(index)"></span>
                        </div>
                    </div>
                </template>
                <template v-if="detail.type===3">
                    <div class="inpVue">
                        <div class="label">链接</div>
                        <el-input v-model="detail.url" placeholder="请输入您上传到知识库的链接地址" style="margin-top: 10px;"></el-input>
                    </div>
                    <div class="inpVue">
                        <div class="label">链接内容概述</div>
                        <textarea placeholder="请输入图片内容概述，帮助 AI 学习训练" v-model="detail.answer" :maxlength="500"></textarea>
                    </div>
                    <div class="inpVue">
                        <div class="label">关联问题</div>
                        <div class="flex align_center margin10" v-for="(item, index) in questions" :key="index">
                            <el-input v-model="questions[index]" placeholder="请输入问题" :maxlength="256"></el-input>
                            <span class="el-icon-plus" style="padding-left: 12px; font-size: 16px; color: #AAA; cursor: pointer;" v-if="index===questions.length-1 && questions.length<10" @click="addQuestion"></span>
                            <span class="el-icon-close" style="padding-left: 12px; font-size: 16px; color: #AAA; cursor: pointer;" v-else @click="removeQuestion(index)"></span>
                        </div>
                    </div>
                </template>
            </div>
            <div class="btnVue flex_center">
                <div class="cancel" @click="beforeClose">取消</div>
                <div style="width: 20px;"></div>
                <div class="btn" @click="submitFun">
                    <span class="el-icon-loading" v-if="loading"></span>
                    <span v-else>确认</span>
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<script>
import { toast } from "@/common/tools"
import { post } from "@/common/request"
import { urlReg } from "@/common/verification"
export default {
    props: {
        dialogTableVisible: {
            type: Boolean,
            default: false
        }
    },
    data(){
        return {
            detail: {
                question: "",
                answer: "",
                url: ""
            },
            loading: false,
            isLoading: false,
            questions: [],
            type: "",
        }
    },
    methods: {
        beforeClose(){
            this.detail = {}
            this.questions = []
            this.loading = false
            this.$emit("beforeClose")
        },

        removeFun(o){
            let array = this.detail.url.split(",")
            let arr = array.filter(ver=>{
                return ver!=o
            })
            this.detail.url = arr.join(",")
        },

        // 滑动到聊天最底部
        scrollToBottom(){
            this.$nextTick(()=>{
                let dom = this.$refs.question
                console.log(dom)
                dom.scrollTo({ top: dom.scrollHeight, behavior: 'smooth' });
            })
        },

        // 知识库内容详情
        getDetail(id){
            this.$post("/front/dataset/datasetContentDetail", { id }).then(res=>{
                if(res.data.code===0) {
                    this.detail = res.data.obj
                    this.questions = res.data.obj.question.split("\n")
                    if(this.detail.url.endsWith('png') || this.detail.url.endsWith('jpg') || this.detail.url.endsWith('jpeg')) this.type = "img"
                    if(this.detail.url.endsWith('mp4')) this.type = "video"
                    if(this.detail.url.endsWith('.xlsx') || this.detail.url.endsWith('.pdf') || this.detail.url.endsWith('.docx')) this.type = "pdf"
                    console.log(this.detail)
                }
            })
        },

        imgfileChange(e){
            let file = e.target.files[0];
            let formData = new FormData()
            formData.append("file", file)
            if(this.isLoading) return
            this.isLoading = true
            post("/front/search/uploadImage", formData).then(res=>{
                this.isLoading = false
                if(res.data.code===0) {
                    if(this.detail.url) this.detail.url += `,${res.data.obj}`
                    else this.detail.url = `${res.data.obj}`
                }else{
                    toast(1, "上传失败，请稍后重试")
                }
            })
            if(this.$refs.clearRef && this.$refs.clearRef.value) this.$refs.clearRef.value = ''; // 清空file文件
        },

        videofileChange(e){
            let file = e.target.files[0];
            let formData = new FormData()
            formData.append("file", file)
            if(this.isLoading) return
            this.isLoading = true
            post("/front/search/uploadVideo", formData).then(res=>{
                this.isLoading = false
                if(res.data.code===0) {
                    if(this.detail.url) this.detail.url += `,${res.data.obj}`
                    else this.detail.url = `${res.data.obj}`
                }else{
                    toast(1, "上传失败，请稍后重试")
                }
            })
            if(this.$refs.clearRef && this.$refs.clearRef.value) this.$refs.clearRef.value = ''; // 清空file文件
        },

        pdffileChange(e){
            let file = e.target.files[0];
            let formData = new FormData()
            formData.append("file", file)
            if(this.isLoading) return
            this.isLoading = true
            post("/front/search/uploadFile", formData).then(res=>{
                this.isLoading = false
                if(res.data.code===0) {
                    if(this.detail.url) this.detail.url += `,${res.data.obj}`
                    else this.detail.url = `${res.data.obj}`
                }else{
                    toast(1, "上传失败，请稍后重试")
                }
            })
            if(this.$refs.clearRef && this.$refs.clearRef.value) this.$refs.clearRef.value = ''; // 清空file文件
        },

        addQuestion(){
            this.questions.unshift("")
            this.scrollToBottom()
        },

        removeQuestion(index){
            this.questions = this.questions.slice(0, index).concat(this.questions.slice(index + 1));
        },


        submitFun(){
            for(let i=0; i<this.questions.length; i++) {
                if(!this.questions[i]) return toast(1, "请输入问题")
            }
            switch(this.detail.type){
                case 1:
                    if(!this.detail.question) return toast(1, "请输入问题")
                    if(!this.detail.answer) return toast(1, "请输入答案") 
                    if(this.loading) return 
                    this.loading = true
                    post("/front/dataset/updateDatasetContent", {
                        id: this.detail.id,
                        question: this.questions.join("\n"),
                        answer: this.detail.answer,
                        url: ""
                    }).then(res=>{
                        this.loading = false
                        if(res.data.code===0) {
                            toast(0, "编辑成功") 
                            this.beforeClose()
                            this.$emit("callback")
                        }else{
                            toast(1, res.data.msg)
                        }
                    })
                break;

                case 2:
                    if(!this.detail.url) return toast(1, "请上传文件")
                    if(!this.detail.question) return toast(1, "请输入问题")
                    if(!this.detail.answer) return toast(1, "请输入答案") 
                    if(this.loading) return 
                    this.loading = true
                    post("/front/dataset/updateDatasetContent", {
                        id: this.detail.id,
                        question: this.questions.join("\n"),
                        answer: this.detail.answer,
                        url: this.detail.url
                    }).then(res=>{
                        this.loading = false
                        if(res.data.code===0) {
                            toast(0, "编辑成功") 
                            this.beforeClose()
                            this.$emit("callback")
                        }else{
                            toast(1, res.data.msg)
                        }
                    })
                break;

                case 3: 
                    if(!urlReg(this.detail.url)) return toast(1, "请输入正确的链接")
                    if(!this.detail.answer) return toast(1, "请输入链接内容概述")
                    if(!this.detail.question) return toast(1, "请输入关联问题")
                    if(this.loading) return
                    this.loading = true
                    post("/front/dataset/updateDatasetContent", {
                        id: this.detail.id,
                        type: 3,
                        question: this.questions.join("\n"),
                        answer: this.detail.answer,
                        url: this.detail.url
                    }).then(res=>{
                        this.loading = false
                        if(res.data.code===0) {
                            toast(0, "编辑成功") 
                            this.beforeClose()
                            this.$emit("callback")
                        }else{
                            toast(1, res.data.msg)
                        }
                    })
                break;
            }
        },
    }
}
</script>


<style lang="less" scoped>
:deep(.el-dialog) {
    width: 700px !important;
    height: 90vh !important;
    border-radius: 10px;
}
:deep(.el-dialog__body) {
    padding: 0 20px 20px;
}
:deep(.el-radio__input.is-checked .el-radio__inner) {
    border-color: #0147fd;
    background: #0147fd;
}
:deep(.el-radio__input.is-checked+.el-radio__label) {
    color: #0147fd;
}
.dialogVue {
    width: 100%;
    .btnVue {
        width: 100%;
        height: 50px;
        background: #fff;
        margin-top: 10px;
        .cancel,.btn {
            width: 250px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            border-radius: 5px;
            cursor: pointer;
        }
        .cancel {
            background: #f5f5f5;
        }
        .btn {
            background: #0147fd;
            color: #fff;
            span {
                color: #fff;
            }
        }
    }
    .innerVue {
        width: 100%;
        height: calc(90vh - 124px);
        overflow-y: scroll
    }
    .innerVue::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
    .btn {
        width: 500px;
        height: 44px;
        text-align: center;
        line-height: 44px;
        background: #0147fd;
        border-radius: 5px;
        cursor: pointer; 
        span {
            color: #fff; 
        }
    }
    .inpVue {
        width: 100%;
        padding-top: 20px;
        .label {
            font-size: 12px;
        }
        textarea {
            width: 100%;
            height: 100px;
            border: #DCDFE6 1px solid;
            display: block;
            // box-sizing: border-box;
            resize: none;
            border-radius: 4px;
            line-height: 1.4;
            margin-top: 10px;
            font-family: PingFangSC, PingFang SC;
            padding: 5px;
            font-size: 13px;
        }
        ::-webkit-input-placeholder { /* WebKit browsers */
            color: #AAA;
            font-size: 13px;
            font-family: PingFangSC, PingFang SC;
        }
        :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color: #AAA;
            font-size: 13px;
            font-family: PingFangSC, PingFang SC;
        }
        ::-moz-placeholder { /* Mozilla Firefox 19+ */
            color: #AAA;
            font-size: 13px;
            font-family: PingFangSC, PingFang SC;
        }
        :-ms-input-placeholder { /* Internet Explorer 10+ */
            color: #AAA;
            font-size: 13px;
            font-family: PingFangSC, PingFang SC;
        }
        textarea::-webkit-scrollbar {
            width: 0;
            height: 0;
        }
        .fileList {
            width: 100%;
            height: 40px;
            overflow-x: scroll;
            .file {
                height: 40px;
                text-align: center;
                line-height: 40px;
                border: 1px solid #DCDFE6;
                border-radius: 4px;
                margin-right: 10px;
                padding: 0 10px;
                span,i {
                    color: #AAA;
                    font-style: normal
                }
                span {
                    cursor: pointer;
                    padding-left: 8px;
                }
            }
        }
        .fileList::-webkit-scrollbar {
            width: 0;
            height: 0;
        }
    }
    .upload {
        width: 100px;
        height: 100px;
        background: #f5f5f5;
        margin-top: 10px;
        cursor: pointer;
        margin-right: 10px;
        .fileBtn {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            cursor: pointer;
            z-index: 98;
            border: none;
            outline: none;
        }
    }
}
</style>